.menu {
    position: relative;
}
.menu nav {
    display: block;
    background: rgba(0,0,0,0.5);
    overflow: hidden;
}
.menu nav > a {
    float: left;
    color: #fff;
    padding: 2em;
    border-right: 1px solid rgba(0, 0, 0, 0.35);
    transition: background .2s;
    display: block;
}
.menu nav > a:hover {
    background: rgba(0,0,0,0.4);
}
.menu .drop {
    color: #fff;
    padding: 2em;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
    display: none; /*ocultamos el botón*/
}
.menu .drop svg {
    fill: #fff;
    vertical-align: middle;
}
@media only screen and (max-width: 768px) {
    .menu {background: rgba(0,0,0,0.3);}
    .menu .drop {display: inline-block;}/*volvemos a mostrar el botón*/
    .menu nav {/*ahora nuestro menú es una lista flotante*/
        position: center; /*estaba en absolute pero se cambio a center para que abarque el menu la pantalla*/
        z-index: 600;
        background: #121212;
        min-width: 20rem;
        display: none;
        top: 100%;left: 0;
    }
    .menu nav > a {/*y los ítems se alinean verticalmente*/
        float: none;
        border: 0 none;
    }
}
.menu nav.open {
    display: block;/*el menu aparece*/
}
.menu .drop.open {
    background: rgba(0,0,0,0.65);/*el boton cambia de color*/
}